<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div id="box" style="width:1000px;height:400px;border:1px solid black"></div>
</body>

</html>
<script>
    let myCharts = echarts.init(document.querySelector('#box'))

    let o = {
        title: {
            text: '标题',
            textStyle: {
                color: 'red'
            },
            left: 'center'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false

        },
        yAxis: {
            axisLine: {
                show: true
            }
        },
        series: {
            type: 'line',
            symbol: "reat",
            data: [
                { name: '1', value: 0 },
                { name: '2', value: 20 },
                { name: '3', value: 30 },
                { name: '666', value: 10 },
            ],
            smooth: true,
            areaStyle: {
                color: 'red'
            },
            itemStyle: {
                color: 'purple'
            },
            //图形文本标签
            label: {
                show: true,
                //标签位置设置
                position: 'bottom',
                color: 'yellowgreen'
            },
            
        },
        grid: {
                left: 30,
                right: 0,
                bottom: 30
            },
    };

    myCharts.setOption(o)
</script>